<template>
    <div class="doctor-search">
        <!-- 标题 -->
        <div class="title">
            <h2>医生管理</h2>
        </div>

        <!-- 使用 el-form 内联表单实现筛选条件 -->
        <div class="filter-section">
            <el-form :model="formInline" inline class="demo-form-inline">
                <el-form-item label="角色">
                    <el-select v-model="formInline.roleId" placeholder="请选择" clearable @change="handleSearch">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in roleList" :key="item._id" :label="item.name" :value="item._id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="所属团队">
                    <el-select v-model="formInline.teamId" placeholder="请选择" clearable @change="handleSearch">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in teamList" :key="item._id" :label="item.name"
                            :value="item._id"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 搜索区域 -->
                <el-form-item label="医生名字" style="width: 400px;">
                    <!-- <div class="search-section"> -->
                    <el-input v-model="formInline.name" placeholder="输入关键字" :suffix-icon="Search"
                        @input="handleSearch" />
                    <!-- </div> -->
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleAddDoctor">新增医生</el-button>
                    <!-- <el-button @click="handleExport">导出</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { findOrganizationsApi, findTeamsApi } from '@/api/doctors'
import { getRolesApi } from '@/api/role'

// 定义事件
const emit = defineEmits(['add-doctor', 'search', 'export'])

// 机构数据类型定义
interface Organization {
    _id: string
    name: string
    address?: string
    contacts: string
    phone: string
    state: number
}

// 团队数据类型定义
interface Team {
    _id: string
    name: string
    organizationId?: string | Organization
}

// 表单数据
const formInline: any = reactive({
    // organization: '',
    // libraryType: '',
    // doctorTag: '',
    // keyword: ''
})

const roleList = ref<Organization[]>([])
const teamList = ref<Team[]>([])

onMounted(() => {
    getRoles();
    findTeams();
})

function getRoles() {
    getRolesApi()
        .then(res => {
            console.log('机构API响应:', res);
            if (res.code == 200) {
                // 将机构数据存储到 organizationList 中
                roleList.value = res.data.rows
            }
        })
}

function findTeams() {
    findTeamsApi()
        .then(res => {
            console.log('团队API响应:', res);
            if (res.code == 200) {
                // 将团队数据存储到 teamList 中
                teamList.value = res.data.rows
            }
        })
}

// 监听搜索条件变化
// watch(formInline, (newVal) => {
//     emit('search', { ...newVal })
// }, { deep: true })

// 新增医生方法
const handleAddDoctor = () => {
    emit('add-doctor')
}

// 导出方法
const handleExport = () => {
    emit('export')
}

// 搜索方法
const handleSearch = () => {
    emit('search', { ...formInline })
}
</script>

<style scoped>
.doctor-search {
    padding: 20px 0;
    background: #fff;
}

.title {
    margin-bottom: 20px;
}

.title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    position: relative;
    padding-left: 12px;
}

.title h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #409EFF;
    border-radius: 2px;
}

.filter-section {
    margin: 40px 0 10px;
}

.search-section {
    margin-bottom: 20px;
}

.demo-form-inline .el-form-item {
    margin-right: 20px;
    margin-bottom: 16px;
}

.demo-form-inline .el-select {
    /* width: 200px; */
}

/* 按钮组样式 */
.demo-form-inline .el-form-item:last-child .el-button+.el-button {
    margin-left: 12px;
}

.el-form-item {
    width: 300px;
}
</style>
